<template>
  <!-- 财务报表报送及更正 -->
  <div style="width: 100%;">
    <!-- 顶部导航栏 -->
    <div class="topNavigationBar">
      <div class="Back" @click="() => { router.push('/submissionOfFinancialStatementsIndex') }">
        <el-icon>
          <Back />
        </el-icon>
        返回
      </div>

      <div class="Breadcrumb">
        <!-- 面包屑组件封装 -->
        <Breadcrumb :showwhat="[{ id: 1, title: '首页', url: '/', disabled: false },
        { id: 2, title: '财务报表报送及更正', url: '/submissionAndCorrectionOfFinancialStatements' }]">
        </Breadcrumb>
      </div>
    </div>


    <div class="submissionAndCorrectionOfFinancialStatementsToBeSubmitted">
      <!-- 报送所属期  -->
      <div class="topBox">
        <div class="title1">报送所属期 </div>
        <div class="title2">
          {{ dateRange.title }}
        </div>
        <div class="title3">
          ( {{ dateRange.startDate }} 至 {{ dateRange.endDate }} )
        </div>

        <div class="title4">
          报送资料种类:
        </div>

        <div class="title3">
          {{ '财务报表报送与信息采集(小企业会计准则)' }}
        </div>
      </div>

      <hr
        style="border: 1px solid #e9e9e9;border-radius: 1px;margin: 18px 0 18px 0; width: calc(100% + 4%);margin-left: -2%;">

      <div class="title5">
        财报导入
      </div>
      <div class="selectTheFile">
        <UploadFile :label="'选择文件'" :multiple="true" :inputAccept="'.xls,.xlsx,'" :onlyGetInputFiles="true"
          @getInputFiles="getInputFiles"> </UploadFile>
        <a href="" style="color: #0099ff;text-decoration: none;">下载模板</a>
      </div>


    </div>
  </div>
</template>

<script setup lang="ts">
import UploadFile from '@/components/UploadFile/UploadFile.vue'
import Breadcrumb from '@/components/Breadcrumb/index.vue';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { globalStore } from '@/stores/global.js'
import { storeToRefs } from 'pinia'
const { dataList, dateRange } = storeToRefs(globalStore())
console.log('dataList.value:', dataList.value);
console.log('dateRange.value:', dateRange.value);

const router = useRouter()

//获取输入的文件列表
const getInputFiles = (files) => {
  console.log('🚀🚀🚀 getInputFiles:', files);
}

onMounted(() => {

})

</script>

<style scoped lang="scss">
.topNavigationBar {
  padding: 10px;
  background-color: #fff;
  /* 20px 左 + 20px 右 还要减去自己的padd造成的加宽了20px*/
  width: calc(100% + 40px - 20px);
  //想要和父亲宽相等，解决父亲padding的问题，父亲的padd是20px,那就往左上角移动20px
  transform: translate(-20px, -20px);
  display: flex;
  align-items: center;

  .Back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b563f;
    font-size: larger;
    cursor: pointer;
    margin-left: 4%;
  }

  .Breadcrumb {
    margin-left: 2%;
    margin-bottom: -4px;
  }
}

.submissionAndCorrectionOfFinancialStatementsToBeSubmitted {
  width: 90%;
  margin: auto;
  padding: 2%;
  border-radius: 5px;
  background-color: #fff;

  .topBox {
    display: flex;

    .title1 {
      font-size: large;
      font-weight: 500;
    }

    .title2 {
      font-size: large;
      font-weight: 500;
      color: #ff9900;
      margin-left: 1%;
    }

    .title3 {
      color: #7a7a7a;
      margin-left: 1%;
    }

    .title4 {
      font-weight: 500;
      margin-left: 3%;
    }

  }

  .title5 {
    font-size: 20px;
    font-weight: 500;
  }

  .selectTheFile {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 20px 0;
  }
}
</style>